<template>
  <div>
    <div>
      <el-form class="search" :inline="true" :model="searchParams" label-width="100px">
        <el-form-item label="名称-英文：" >
          <el-input v-model="searchParams.nameEn"></el-input>
        </el-form-item>
        <el-form-item label="名称-中文：" >
          <el-input v-model="searchParams.nameCn"></el-input>
        </el-form-item>
        <div class="searchBtnPart">
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
          <el-button type="success" icon="el-icon-search" @click="add">新建</el-button>
        </div>
      </el-form>
    </div>
    <div>
      <el-table
          class="table"
          :data="tableData"
          style="width: 100%"
          border
      >
        <el-table-column label="图标" width="98">
          <template slot-scope="scope">
              <img v-if="scope.row.img" :src="uri+scope.row.img" class="avatar-list">
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类别" width="180"></el-table-column>
        <el-table-column prop="nameEn" label="名称-英文" width="180"></el-table-column>
        <el-table-column prop="nameCn" label="名称-中文" width="180"></el-table-column>
        <el-table-column prop="nameCn" label="所需材料" width="180"></el-table-column>
        <el-table-column prop="price" label="价值" width="180"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="success" @click="detail(scope.row)">详情</el-button>
            <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除嘛？"
              @confirm="handleDelete(scope.$index, scope.row)"
              style="margin-left:10px" >
              <el-button slot="reference" size="mini" type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加/编辑 弹窗 -->
      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="类别" label-width="120px">
            <el-select v-model="form.type">
              <el-option :key="item" v-for="item in typeData" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称-英文" label-width="120px">
            <el-input v-model="form.nameEn" autocomplete="off" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="名称-中文" label-width="120px">
            <el-input v-model="form.nameCn" autocomplete="off" style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="说明-英文" label-width="120px">
            <el-input type="textarea" v-model="form.descEn" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="说明-中文" label-width="120px">
            <el-input type="textarea" v-model="form.descCn" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" label-width="120px">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              :headers="headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="价值" label-width="120px">
            <el-input v-model="form.price" autocomplete="off" style="width:200px"></el-input>
          </el-form-item>
          <!-- <el-form-item label="材料" label-width="120px">
            <el-popover
              placement="bottom"
              width="480"
              trigger="click"
              v-model="popoverVisible"
            >
              <div class="content unicode iconDiv" style="display: block;">
                <ul class="infinite-list icon_lists dib-box" style="overflow:scroll;height:500px">
                  <li :key="item" v-for="item in iconList" class="dib">
                    <i @click="iconSelect(item)" :class="'icon el-icon-'+item"></i>
                  </li>
                </ul>
              </div>
              <el-input slot="reference" v-model="form.icon" autocomplete="off" style="width:150px"></el-input>
            </el-popover>
            <i :class="'showicon icon el-icon-'+form.icon" style="font-size:35px"></i>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button @click="submitData" type="success">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
let token = Cookies.get('token');
export default {
  name: 'WitcherAlchemy',
  data() {
    return {
      uri: this.$http.uri,
      headers:{
         'token': token
      },
      imageUrl: '',
      uploadUrl: this.$http.uri + "/res/up/single",
      preUrl: "/witcher3/alchemy",
      pageUrl: "/page", // 获取节点数据接口
      addUrl: "/create", // 添加接口
      updateUrl: "/update", // 更新接口
      delUrl: "/delete", // 删除接口
      detailUrl: "/detail", // 详情
      tableData: [], // 列表数据
      dialogFormVisible: false, // 添加/修改 弹窗
      index: null, // 当前编辑行索引
      submitType: null, // 提交类型 添加/更新
      typeData: ["材料", "酒精", "炸弹", "煎药", "剑油", "药剂", "任务"],
      form: { // 表单数据
        type: '',
        id: '',
        nameEn: '',
        nameCn: '',
        descEn: '',
        descCn: '',
        img: '',
        price: '',
      },
      searchParams: { // 请求参数
        nameEn: '',
        nameCn: '',
      },
      page: { // 分页参数
        size: 10,
        current: 1,
        total: 0,
      },
    }
  }
  ,created() {
    this.getData(); // 请求列表数据
  }
  ,methods: {
    // 添加按钮
    add(){
      this.dialogFormVisible = true;
      Object.assign(this.form, {
        type: '',
        id: '',
        nameEn: '',
        nameCn: '',
        descEn: '',
        descCn: '',
        img: '',
        price: '',
      } );
      this.imageUrl = '';
      this.submitType = "添加";
    },
    // 跳转到详情页
    detail(row){
      this.$router.push('/witcher3/alchemy/detail/'+row.id).catch(err=>err);
    },
    // 编辑按钮
    handleEdit(index, row) {
      // 获取详情数据
      this.detailData(row.id);
      this.dialogFormVisible = true;
      this.index = index;
      this.submitType = "编辑";
    },
    // 提交数据
    async submitData(){
      let params = {
        ...this.form
      };
      let res;
      if(this.submitType == "添加"){
        res = await this.$http.post(this.preUrl + this.addUrl, params);
      }
      else{
        res = await this.$http.put(this.preUrl + this.updateUrl, params);
      }
      if(res.code === 1){
        this.$message({
          message: '提交成功！',
          type: 'success'
        });
        this.dialogFormVisible = false;
        // 更新列表数据
        this.getData();
      }
      else{
        this.$message.error('提交失败：' + res.message);
      }
    },
    // 删除数据
    async handleDelete(index, row) {
      let res = await this.$http.del(this.preUrl + this.delUrl+"?id="+row.id);
      if(res.code === 1){
        this.$message({
          message: '删除成功！',
          type: 'success'
        });
        this.dialogFormVisible = false;
        // 更新列表数据
        this.getData();
      }
      else{
        this.$message.error('删除失败：' + res.data);
      }
    },
    // 获取数据
    async getData(){
      let param = {
        ...this.page,
        ...this.searchParams
      };
      let res = await this.$http.post(this.preUrl + this.pageUrl, param);
      if(res.code === 1){
        this.tableData = res.data.list;
        this.page = res.data.page;
      }
    },
    // 详情数据
    async detailData(id){
      let param = {
        id: id
      };
      let res = await this.$http.post(this.preUrl + this.detailUrl, param);
      if(res.code === 1){
        Object.assign(this.form, res.data );
        if(res.data.img && res.data.img!=""){
          // 图片赋值
          this.imageUrl = this.$http.uri + res.data.img;
        }
      }
    },
    // 查询数据
    search(){
      this.getData();
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      if(res.code === 1){
        this.form.img = res.data.uri;
      }
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
  }
}
</script>
<style>
.dib {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
.dib-box .dib {
  vertical-align: top;
  font-size: 12px;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: inherit;
}
.showicon{
  font-size: 50px;
  line-height: 31px;
  color: white;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 0px 16px 0px 20px;
}
.icon_lists {
  width: 100% !important;
  overflow: hidden;
  *zoom: 1;
}
.icon_lists li {
  width: 50px;
  margin-bottom: 2px;
  margin-right: 2px;
  text-align: center;
  list-style: none !important;
  cursor: default;
}
.icon_lists li .code-name {
  line-height: 1.2;
}
.icon_lists .icon {
  display: block;
  height: 50px;
  line-height: 50px;
  font-size: 35px;
  margin: 10px auto;
  color: white;
  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
  -moz-transition: font-size 0.25s linear, width 0.25s linear;
  transition: font-size 0.25s linear, width 0.25s linear;
}

.icon_lists .icon:hover{
  font-size: 45px;
}

.searchBtnPart {
  float:right;
}
.avatar-uploader .el-upload{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 78px;
  height: 78px;
  display: block;
}

.avatar-list {
  width: 50px;
  height: 50px;
  display: block;
}
</style>
